<!--红云超市-->
<template>
  <section class="shopping-main">
    <div class="d-scroll-2head list-text" style>
      <fetchData
        v-if="isLoading"
        :loading="isLoading"
        :data="swipeData"
      ></fetchData>
      <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
      >
        <cube-swipe>
          <div
            class="box"
            v-for="(data, index) in swipeData"
            :key="index"
            v-show="data.isShow"
          >
            <div class="item">
              <div class="item-head" @click="mallDetailNew(data)">
                <div class="item-info">
                  <img :src="data.logo" alt="" />
                  <span>{{ data.name }}</span>
                </div>
                <span class="right" @click.stop="mallDetail(data)">进入超市</span>
              </div>
              <happyShoppingChild
                :groupId="data.groupId"
                :ref="`child${index}`"
                @addIsShow="addIsShow($event, data.groupId)"
              ></happyShoppingChild>
            </div>
          </div>
          <div class="water-logo" v-if="!isLoading && !isChild">
            <img
              src="static/images/dangjian/home/water-logo-comment.png"
              alt=""
            />
            <div class="pdv-7"></div>
            <p>敬请期待</p>
          </div>
          <div class="pdv-10"></div>
          <div class="pdv-10"></div>
          <div class="pdv-10"></div>
        </cube-swipe>
        <!-- <div
          class="text-center no-data"
          v-if="!isLoading && swipeData.length === 0"
        >
          <img src="../../../../static/images/no_data.png" alt />
          <p>暂无数据</p>
        </div>
         -->
        <!-- W noData -->

      </cube-scroll>
    </div>
  </section>
</template>

<script>
import progressBar from "@/components/common/progressBar.vue";
import supermarketMenu from "@/components/dangjian/mall/supermarketMenu.vue";
import happyShoppingChild from "@/components/dangjian/mall/happyShoppingChild.vue";
import moment from "moment";
import tools from "@/utils/tools";
import api from "@/common/config/api";

export default {
  props: ["num"],
  components: { progressBar, supermarketMenu, happyShoppingChild },
  name: "happyShopping",
  data() {
    return {
      isChild: false,
      currentIndex: "1",
      fn: tools,
      isLoading: true,
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: " ",
        },
      },
      routeNameList: [],
      pageIndex: 1,
      swipeData: [],
      goodsList: [],
      userInfo: {},
      todayData: {},
      msgFormSon: 1,
    };
  },
  created() {
    this.userInfo = this.$localStorage.get("userInfo");
    this.getDictValueRouter();
    this.mallGetStoreListDto();
  },
  methods: {
    addIsShow(data) {
      if (data) {
        this.isChild = data; //用户判断是否存在商品
      }

      const isShow = arguments[0];
      const id = arguments[1];
      this.swipeData = this.swipeData.map((item) => {
        if (item.groupId === id) {
          item.isShow = isShow;
        }
        return item;
      });
    },
    go(path) {
      this.$router.push({ path: path });
    },
    //请求商户类型
    mallGetStoreListDto() {
      this.isLoading = true;
      let parame = {
        fzr: "",
        groupId: "",
        limit: 20,
        name: "",
        page: this.pageIndex,
        status: "ENABLED",
        type: this.num,
      };
      return this.fetchService.mallGetStoreListDto(parame).then((res) => {
        this.isLoading = false;
        if (res.code !== 0) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.options.pullUpLoad = false;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        console.log('this.swipeData',this.swipeData)
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
      });
    },
    //跳转至超市详情
    //点击查看详情
    mallDetail(data) {
      this.$router.push({ path: "mallDetail" });
      sessionStorage.setItem("mallInfo", JSON.stringify(data));
    },
    //点击查看商家简介
    mallDetailNew(data) {
      this.$router.push({ path: "mallIntroduction" });
      sessionStorage.setItem("mallIntroduction", JSON.stringify(data));
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.mallGetStoreListDto();
    },
    onPullingDown() {
      this.swipeData = [];
      this.options.pullUpLoad = true;
      console.log("onPullingDown");
      this.pageIndex = 1;
      this.mallGetStoreListDto();
    },
    getDictValueRouter() {
      let data = {
        catKey: "CAT_MALL_",
        treeKey: "MERCHANTS_TYPE_",
      };
      this.fetchService.dictValue(data).then((res) => {
        if (res.code === 0) {
          this.routeNameList = res.data;
        }
        console.log("routeNameList", this.routeNameList);
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.mine-page {
  /* background: url("../../../static/images/dangjian/mine/bg-mine-hd.png") $bg-color no-repeat center #{pxToRem($head-height)};
    background-size: 100% auto; */
  padding: 0;
  .header {
    justify-content: space-between;
    margin-bottom: pxToRem(0px);
    position: relative;
    .message {
      .head-btn-text {
        font-size: 14PX;
      }
    }
  }
}
.water-logo{
  >p{
    font-size: 28PX;
  }
}
.score-hd {
  height: 242px;
  text-align: center;
  background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png")
    $theme-color no-repeat center;
  background-size: 100% auto;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .score-head {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ea7676;

    img {
      height: 100%;
      width: 100%;
    }
  }

  .score-text {
    margin-right: 50px;
    text-align: left;

    .score-tip {
      .score-tip-text {
        vertical-align: super;
        color: #ffffff;
      }
    }
  }

  .score-play {
    width: 171px;
    height: 46px;
    line-height: 46px;
    background: #e20001;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
  }

  .score {
    font-size: 20PX;
    line-height: 1.2em;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-right: 10px;
  }

  .tip {
    font-size: 12PX;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}

.shopping-main {
  padding: 20px;
  .item {
    width: 100%;
    height: 370px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 59, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 0 20px;
    background: #ffffff;
    .item-head {
      width: 100%;
      height: 110px;
      font-size: 14PX;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      .item-info {
        font-size: 14PX;
        img {
          display: inline-block;
          width: 70px;
          height: 70px;
          vertical-align: middle;
          margin-right: 24px;
        }
      }

      .right {
        width: 110px;
        height: 40px;
        text-align: center;
        font-size: 12PX;
        line-height: 40px;
        border: 1px solid #ec0c0c;
        color: #ec0c0c;
        border-radius: 10px;
      }
    }
    .item-content {
      width: 100%;
      height: 260px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .item-ticket {
        width: 204px;
        height: 204px;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          color: #ec0d0d;
          margin-top: 24px;
          margin-bottom: 12px;
          .num {
            font-size: 16PX;
            /* display: block; */
          }
        }

        .tip {
          display: block;
          font-size: 12PX;
          color: #666666;
        }
      }
    }
  }
}
</style>
